<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
    <div :id="uniqueID2" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'

export default {
  name: 'FuelConsume',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: '',
      uniqueID2: ''
    }
  },
  created() {
    this.uniqueID = uuidv1()
    this.uniqueID2 = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      series: [{
        name: '第一个圆环',
        type: 'pie',
        clockWise: false,
        radius: ['80%', '90%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            shadowBlur: 0
          }
        },
        hoverAnimation: false,
        data: [{
          value: 9786,
          label: {
            normal: {
              rich: {
                a: {
                  color: '#FFFD9B',
                  align: 'center',
                  fontSize: 48 * scale
                },
                b: {
                  color: '#FFFFFF',
                  align: 'center',
                  fontSize: 24 * scale
                },
                c: {
                  color: '#A0C8DB',
                  align: 'center',
                  fontSize: 20 * scale
                }
              },
              formatter: function(params) {
                return '{a|' + params.value + '}' + '\n\n{b|实时总消耗量}' + '\n\n{c|kgee}'
              },
              position: 'center',
              show: true,
              textStyle: {
                fontSize: 14 * scale,
                fontWeight: 'normal',
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#2c6cc4',
              shadowColor: '#2c6cc4',
              shadowBlur: 0
            }
          }
        }, {
          value: 12000,
          name: 'invisible',
          itemStyle: {
            normal: {
              color: '#4FC7FF'
            },
            emphasis: {
              color: '#4FC7FF'
            }
          }
        }]
      }]
    }

    myChart.setOption(option)

    var myChart2 = echarts.init(document.getElementById(this.uniqueID2))

    var option2 = {
      tooltip: null,
      legend: {
        data: ['煤', '天然气'],
        right: 20,
        textStyle: {
          color: '#ffffff'
        }
      },
      color: ['#1170E4', '#4FC7FF'],
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['11-22', '11-23', '11-24', '11-25', '11-26', '11-27', '11-28'],
        axisLabel: {
          textStyle: {
            color: '#ffffff'
          }
        }
      },
      series: [
        {
          name: '煤',
          type: 'bar',
          stack: '总量',
          barWidth: 20,
          data: [3200, 3020, 3010, 3304, 3900, 3300, 3200]
        },
        {
          name: '天然气',
          type: 'bar',
          stack: '总量',
          barWidth: 20,
          data: [1200, 1320, 1010, 1340, 900, 2300, 2100]
        }
      ]
    }

    myChart2.setOption(option2)

    window.addEventListener('resize', () => {
      myChart.resize()
      myChart2.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
.g-container {
  width: 100%;
  display: grid;
  grid-template-columns: 255px calc(100% - 255px);
}
</style>
